<script setup lang="ts">
import { getArticlesAPI } from '@/api/article';
import type { ArticleItem } from '@/types';
import dayjs from 'dayjs';
import { ref, watch } from 'vue';


const props = defineProps<{
    activeId:number
}>()

const list = ref<ArticleItem[]>([])
const getArticles = async ()=>{
 const result = await getArticlesAPI({
    channel_id: props.activeId,
    timestamp:Date.now().toString()
 })
 list.value = result.results
}

watch(()=>props.activeId,(newId)=>{
    getArticles()
},{
    immediate:true
})


</script>

<template>
    <div class="article-list">
        <div class="article-item" v-for="item in list" :key="item.art_id">
            <p class="title">{{ item.title }}</p>
            <template v-if="item.cover.type === 3">
                <img class="img" v-for="img in item.cover.images" :src="img" alt="">
            </template>
            <template v-else-if="item.cover.type === 1">
                <img class="img"  :src="item.cover.images?.[0]" alt="">
            </template>
            <div class="info">
                <span>{{ item.aut_name }}</span>
                <span>{{item.comm_count}}评论</span>
                <span>{{ dayjs(item.pubdate).fromNow()  }}</span>
            </div>
        </div>
    </div>
</template>